<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现秒杀倒计时</title>
		<script>
			window.addEventListener('load',function(){
				// 清除定时器
/* 				var btn=document.querySelector('button');
				btn.addEventListener('click',function(){
					// 清除掉定时器
					clearTimeout(timer1);
				})
				var timer1 = setTimeout(function(){
					alert("爆炸了")
				},3000)
				
		
				 我们必须要有一个函数能够实现每隔多长事件（1秒钟）进行调用
				 
				 
				 */

				/* setInterval(function(){
					alert('爆炸了！！！！');
				},1000);
 */
				
				var hour = document.querySelector('.hour');
				var minute = document.querySelector('.minute');
				var second = document.querySelector('.second');
				
				// 获取某一个时间的毫秒值，
				// 在我们的工程开发中，这个时间应该是由后端传给我们的
				var inputTime = +new Date('2025-2-17 20:21:23')
				console.log(inputTime);
				countDown(); // 直接调用一下时间计算函数，解决页面初始化的问题
				// 定时器
				function countDown(){
					// 取当前时间的毫秒值
					var nowTime = +new Date();
					// 计算时间 // 得到了两个时间之间有多少秒
					var times = (inputTime - nowTime) / 1000;
					// 计算小时
					var h = parseInt(times / 60 / 60 % 24);
					h = h < 10 ? '0' + h : h;
					hour.innerHTML = h; // 把剩余的小时给到标签中
					// 计算分钟
					var m = parseInt(times / 60 % 60);
					m = m < 10? '0' + m : m;
					minute.innerHTML = m;
					//  计算秒
					var s = parseInt(times % 60);
					s = s<10 ? '0'+s : s;
					second.innerHTML = s;
					
				}
				
				setInterval(countDown,1000);
				
			})
		</script>
		<style>
			span {
				display: inline-block;
				width: 100px;
				height: 100px;
				background-color: black;
				color: white;
				line-height: 100px;
				text-align: center;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<button>停止定时器</button>
		<div>
			<span class="hour">10</span>
			<span class="minute">20</span>
			<span class="second">30</span>
		</div>
	</body>
</html>